<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="215" height="225" xmlns:xlink="http://www.w3.org/1999/xlink" onload="StartAnimation(evt)">
    <script type="text/javascript">
        <![CDATA[
        var xmlns = "http://www.w3.org/2000/svg";
        var xlink = "http://www.w3.org/1999/xlink";

        var MapDoc = document.documentElement;
        var SVGDocument = null;

        function StartAnimation(evt) {
            SVGDocument = evt.target.ownerDocument;
        }

        function BeginAgain(bubble) {
            var bub = SVGDocument.getElementById(bubble);
            bub.beginElement();
        }
        ]]>
    </script>

    <defs>
        <svg id="bubble" x="0.0" y="0.0" height="23" width="23">
            <path style="fill:#5555ff;fill-opacity:1;stroke:#20647f;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" d="m 20.013647,9.9931765 a 10.006824,10.006824 0 1 1 -20.013647,0 10.006824,10.006824 0 1 1 20.013647,0 z"
                    />
        </svg>

        <g id="zigzag">
            <path style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 16.667517,19.182694 165.159943,0 -164.907405,164.907406 166.927705,0" id="zigzag-path" />
        </g>
    </defs>

    <rect x="10" y="10" height="210" width="200" rx="14" ry="14" style="fill:none;stroke:#000000;stroke-width:1.5" />
    <rect x="0" y="0" width="33" height="23" style="fill:#ffffff;stroke:#ffffff;fill-opacity:1;opacity:1" />
    <svg x="10" y="15">
        <use xlink:href="#zigzag" id="zigzag-instance1" />
        <g id="motion1">
            <use xlink:href="#bubble" id="bubble1" visibility="visible" x="-10" y="-10">
                <animateMotion id="bubble1am1" dur="3s" keyTimes="0; 1" keyPoints="0; 1" calcMode="linear" repeatcount="1">
                    <mpath xlink:href="#zigzag-path" />
                </animateMotion>
                <animateMotion id="bubble1am2" begin="bubble1am1.end" dur="3s" keyTimes="0; 1" keyPoints="1; 0" calcMode="linear" fill="freeze" onend="BeginAgain('bubble1am1')">
                    <mpath xlink:href="#zigzag-path" />
                </animateMotion>
            </use>
        </g>
    </svg>
</svg>
</body>
</html>